<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1、vue的继承函数：构建一个没被new的Vue构造器副本方法，该方法默认已经携带了部分配置
                + 构造器继承函数语法`Vue.extend( options )
                    - 返回一个新的具有Vue基本功能和特殊配置的新构造函数
                    - options：该参数用于定义新构造器的默认配置
                                该配置项等同于 new Vue(options) 的options参数 （el data 除外）

                + el 配置项只能被用于 new 关键字定义的vue构造函数配置中，继承函数不能作为默认配置使用
                + data 
                    通过关键字new 方式创建的vue实例可以取值 object 定义数据仓库
                    但继承函数和组件默认配置定义时，必须使用工厂函数构建数据仓库
                    （是为了杜绝 vue 实例复用时的 数据共享问题）
        -->
        <input type="button" value="提示" @click="showTip()">
    </div>
    <hr>
    <div id="root">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <input type="button" value="提示" @click="showTip()">
    </div>
    <hr>
    <div id="box">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <input type="button" value="提示" @click="showTip()">
    </div>
    <script>
        // let MyVue = Vue.extend()
        let MyVue = Vue.extend({
            // 默认配置
            // data:{
            //     msg:"继承函数的msg默认值"
            // },

            // 工厂函数 - 一个在js 使用式可以快速构建数据副本的特殊方法
            data:function(){
                // 返回的data就是默认数据仓库的配置对象
                return {
                    msg:"继承函数的msg默认值"
                }
            },
            methods: {
                showTip(){
                    alert(3);
                }
            }
        })
        console.log("MyVue:",MyVue);

        new Vue({
            el:"#app",
            methods: {
                showTip(){
                    alert(1);
                }
            },
        })
        
        // new MyVue({
        //     el:"#root",
        //     methods: {
        //         showTip(){
        //             alert(2);
        //         }
        //     },
        // })
        
        // new Vue({
        //     el:"#root"
        // })
        new MyVue({
            // data:{
            //     msg:"测试数据"
            // },
            el:"#root"
        })

        new MyVue({
            el:"#box"
        })
    </script>
    <script>
        // // JS的工厂函数
        // let obj = {
        //     a:1,
        //     b:2,
        //     user:{
        //         name:"tom"
        //     },
        //     arr:[1,2,3,4]
        // }

        // let u1 = obj;  // ==> 引用赋值
        // // es6的对象展开符
        // let u2 = { ...obj };  // 新对象构建 ==> 浅克隆


        function createObj(){
            return  {
                a:1,
                b:2,
                user:{
                    name:"tom"
                },
                arr:[1,2,3,4]
            }
        }
        let u3 = createObj();
        let u4 = createObj();
    </script>
</body>
</html>